<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/main.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>错误页面管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3a0ca3;
            --success: #2ec4b6;
            --light: #f8f9fa;
            --dark: #212529;
            --text-color: #333;
            --bg-color: #f5f7fb;
            --card-bg: #ffffff;
            --header-bg: linear-gradient(135deg, var(--primary), var(--secondary));
            --border-color: #dee2e6;
            --input-bg: #ffffff;
            --text-muted: #6c757d;
        }
        
        [data-theme="dark"] {
            --primary: #5a76ff;
            --secondary: #4a5ad4;
            --success: #2ec4b6;
            --light: #1a1c23;
            --dark: #f8f9fa;
            --text-color: #e0e0e0;
            --bg-color: #121418;
            --card-bg: #1e2229;
            --header-bg: linear-gradient(135deg, #2a3a8d, #1a1a5e);
            --border-color: #2d333b;
            --input-bg: #252b33;
            --text-muted: #a0a8b0;
            --table-bg: #1e2229;
            --table-header-bg: #252b33;
            --btn-hover-bg: #2d333b;
        }
        
        [data-theme="dark"] .table {
            --bs-table-color: var(--text-color);
            --bs-table-bg: var(--table-bg);
            --bs-table-border-color: var(--border-color);
            --bs-table-striped-bg: var(--table-header-bg);
            --bs-table-striped-color: var(--text-color);
            --bs-table-active-bg: var(--btn-hover-bg);
            --bs-table-active-color: var(--text-color);
            --bs-table-hover-bg: #292f37;
            --bs-table-hover-color: var(--text-color);
        }
        
        [data-theme="dark"] .table th {
            color: var(--text-color);
            background-color: var(--table-header-bg);
            border-color: var(--border-color);
        }
        
        [data-theme="dark"] .btn-outline-primary {
            color: var(--primary);
            border-color: var(--primary);
        }
        
        [data-theme="dark"] .btn-outline-primary:hover {
            background-color: var(--primary);
            color: white;
        }
        
        [data-theme="dark"] .btn-outline-secondary {
            color: var(--text-muted);
            border-color: var(--text-muted);
        }
        
        [data-theme="dark"] .btn-outline-secondary:hover {
            background-color: var(--text-muted);
            color: white;
        }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: background-color 0.3s, color 0.3s;
        }
        
        .navbar {
            background: var(--header-bg) !important;
        }
        
        .card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            transition: background-color 0.3s, border-color 0.3s, color 0.3s;
        }
        
        .theme-switch-container {
            position: fixed;
            top: 15px;
            right: 15px;
            z-index: 1000;
        }
        
        #theme-toggle {
            background-color: var(--card-bg);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            color: var(--text-muted);
            border-top: 1px solid var(--border-color);
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand fw-bold" href="/">
                <i class="bi bi-cloud-arrow-up-fill me-2"></i>
                文件共享平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/admin">管理中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/admin_pages">错误页面管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/logout">退出登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container py-4">
        <h3 class="mb-4"><i class="bi bi-exclamation-triangle me-2"></i>错误页面管理</h3>
        <div class="card mb-4">
            <div class="card-body">
                <p class="card-text mb-3">此页面用于管理系统错误页面。您可以查看和预览不同的错误页面。</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>错误代码</th>
                                <th>错误名称</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>400</td>
                                <td>错误请求</td>
                                <td>
                                    <a href="/400" target="_blank" class="btn btn-sm btn-outline-primary me-2"><i class="bi bi-eye me-1"></i>预览</a>
                                    <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil me-1"></i>编辑</button>
                                </td>
                            </tr>
                            <tr>
                                <td>403</td>
                                <td>禁止访问</td>
                                <td>
                                    <a href="/403" target="_blank" class="btn btn-sm btn-outline-primary me-2"><i class="bi bi-eye me-1"></i>预览</a>
                                    <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil me-1"></i>编辑</button>
                                </td>
                            </tr>
                            <tr>
                                <td>404</td>
                                <td>页面不存在</td>
                                <td>
                                    <a href="/404" target="_blank" class="btn btn-sm btn-outline-primary me-2"><i class="bi bi-eye me-1"></i>预览</a>
                                    <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil me-1"></i>编辑</button>
                                </td>
                            </tr>
                            <tr>
                                <td>500</td>
                                <td>内部服务器错误</td>
                                <td>
                                    <a href="/500" target="_blank" class="btn btn-sm btn-outline-primary me-2"><i class="bi bi-eye me-1"></i>预览</a>
                                    <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil me-1"></i>编辑</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p>© 2025 508364.All rights reserved.</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // 深色模式切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const themeToggle = document.getElementById('theme-toggle');
            const themeIcon = themeToggle.querySelector('i');
            
            // 检查本地存储或系统偏好
            const savedTheme = localStorage.getItem('theme') || 
                            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
            
            if (savedTheme === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
                themeIcon.className = 'bi bi-sun';
                themeToggle.innerHTML = '<i class="bi bi-sun"></i> 浅色模式';
            } else {
                document.documentElement.removeAttribute('data-theme');
                themeIcon.className = 'bi bi-moon';
                themeToggle.innerHTML = '<i class="bi bi-moon"></i> 深色模式';
            }
            
            // 切换主题
            themeToggle.addEventListener('click', function() {
                const currentTheme = document.documentElement.getAttribute('data-theme');
                if (currentTheme === 'dark') {
                    document.documentElement.removeAttribute('data-theme');
                    localStorage.setItem('theme', 'light');
                    themeIcon.className = 'bi bi-moon';
                    themeToggle.innerHTML = '<i class="bi bi-moon"></i> 深色模式';
                } else {
                    document.documentElement.setAttribute('data-theme', 'dark');
                    localStorage.setItem('theme', 'dark');
                    themeIcon.className = 'bi bi-sun';
                    themeToggle.innerHTML = '<i class="bi bi-sun"></i> 浅色模式';
                }
            });
        });
    </script>
    <div class="theme-switch-container">
        <button id="theme-toggle" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-moon"></i> 深色模式
        </button>
    </div>
</body>
</html>